<template>
    <div class="app-container" style="height: 100%;overflow: hidden;">
      <el-row :gutter="20" style="height: 100%;">
        <!--部门数据-->
        <el-col :span="4" :xs="24" style="height:100%;">
          <div class="head-container">
            <el-input v-model="deptName" placeholder="请输入产品" clearable
                      size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
          </div>
          <div class="head-container" style="height:90%; overflow: auto;">
            <el-tree ref="tree" :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                     :filter-node-method="filterNode" node-key="id" :default-expanded-keys="['1']" :default-expand-all="false" highlight-current @node-click="handleNodeClick">
                     <span class="custom-tree-node" slot-scope="{ node,data }">
                          <span>
                            ( {{data.code}})
                          </span>
                          <span>
                            {{ node.label }}
                          </span>
                        </span>
                     </el-tree>
          </div>
        </el-col>
        <!--用户数据-->
        <el-col :span="20" :xs="24" style="height:100%; overflow: auto;">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="存货编码" prop="code">
              <el-input v-model="queryParams.code" placeholder="请输入存货编码"
                        clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="产品名称" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入产品名称"
                        clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="产品型号" prop="model">
              <el-input v-model="queryParams.model" placeholder="请输入产品型号"
                        clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <!--<el-form-item label="产品型号明细" prop="brand">
              <el-input v-model="queryParams.brand" placeholder="请输入产品型号明细"
                        clearable @keyup.enter.native="handleQuery" style="width: 130px"/>
            </el-form-item>-->
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                         v-hasPermi="['system:user:add']">新增
              </el-button>
            </el-col>
            <!--<el-col :span="1.5">
              <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                         @click="handleDelete" v-hasPermi="['system:user:remove']">删除
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="info" plain icon="el-icon-upload2" size="mini"
                         @click="handleImport" v-hasPermi="['system:user:import']">导入
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="warning" plain icon="el-icon-download" size="mini"
                         @click="handleExport" v-hasPermi="['system:user:export']">导出
              </el-button>
            </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
          </el-row>

          <el-table border v-loading="loading" :data="userList" border stripe >
            <!-- <el-table-column type="selection" width="50" align="center"/> -->
            <el-table-column label="存货编码" align="center" key="code" prop="code" v-if="columns[0].visible"/>
            <el-table-column label="产品名称" align="center" key="name" prop="name" v-if="columns[1].visible"
                             :show-overflow-tooltip="true"/>
            <el-table-column label="产品型号" align="center" key="model" prop="model" v-if="columns[2].visible"
                             :show-overflow-tooltip="true"/>
           <!-- <el-table-column label="产品型号明细" align="center" key="brand" prop="brand" v-if="columns[3].visible"
                             :show-overflow-tooltip="true"/>-->
            <el-table-column label="计量单位" align="center" key="unit" prop="unit" v-if="columns[4].visible"
                             :show-overflow-tooltip="true"/>
            <el-table-column label="存货数量" align="center" key="count" prop="count" v-if="columns[5].visible"
                             width="120"/>
            <!--<el-table-column label="冻结数量" align="center" key="counts" prop="counts" v-if="columns[5].visible"
                             width="120"/>-->
            <el-table-column label="可用数量" align="center" key="remainderCount" prop="remainderCount" v-if="columns[6].visible"
                             width="120"/>
           <!-- <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  active-value="0"
                  inactive-value="1"
                  @change="handleStatusChange(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>-->
            <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                >删除
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleShow(scope.row)"
                >查看明细
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"/>
        </el-col>
      </el-row>

      <!-- 添加或修改用户配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="60%" :close-on-click-modal="false" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="存货编码" prop="code">
                <el-input v-model="form.code" placeholder="请输入存货编码" maxlength="30"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品分类" prop="parentId">
                <treeselect v-model="form.parentId" :options="deptOptions" placeholder="请选择产品分类"
                            style="width:240px;"/>
              <!--  <el-input v-model="form.mainId" placeholder="请输入产品分类" maxlength="30"/>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入产品名称" maxlength="30"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品型号" prop="model">
                <el-input v-model="form.model" placeholder="请输入产品型号" maxlength="30"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
           <!-- <el-col :span="12">
              <el-form-item label="产品型号明细" prop="brand">
                <el-input v-model="form.brand" placeholder="请输入产品型号明细" maxlength="30"/>
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="计量单位" prop="unit">
                <el-input v-model="form.unit" placeholder="请输入计量单位" maxlength="30"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存货名称" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入存货名称"/>
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <GoodsSaleListForm-info @ok="getList" ref="GoodsSaleListFormList"></GoodsSaleListForm-info>
    </div>
  </template>

  <script>
      //import {listArea} from "@/api/sysArea/area";
      import {listGoodsOrderIn,addGoodsOrderIn,updateGoodsOrderIn,delGoodsOrderIn,updateArea,addArea} from "@/api/sysArea/area";
      import {getToken} from "@/utils/auth";
      import {listByLazyTree} from "@/api/sysArea/area";
      import GoodsSaleListFormInfo from '@/views/develop/goodsSale/module/GoodsSaleListFormInfo'
     // import {treeselect} from "@/api/system/dept";
      import Treeselect from "@riophae/vue-treeselect";
      import "@riophae/vue-treeselect/dist/vue-treeselect.css";

      export default {
          name: "InventoryList2",
          components: {
              Treeselect,
              GoodsSaleListFormInfo
          },
          data() {
              return {
                  // 遮罩层
                  loading: true,
                  // 选中数组
                  ids: [],
                  // 非单个禁用
                  single: true,
                  // 非多个禁用
                  multiple: true,
                  // 显示搜索条件
                  showSearch: true,
                  // 总条数
                  total: 0,
                  // 用户表格数据
                  userList: null,
                  // 弹出层标题
                  title: "",
                  // 部门树选项
                  deptOptions: [],
                  // 是否显示弹出层
                  open: false,
                  // 部门名称
                  deptName: undefined,
                  // 默认密码
                  initPassword: undefined,
                  // 日期范围
                  dateRange: [],
                  // 岗位选项
                  postOptions: [],
                  // 角色选项
                  roleOptions: [],
                  // 表单参数
                  deptIdIn: undefined,
                  deptNameIn: undefined,
                  mainIdIn: undefined,
                  form: {
                    deptId: undefined,
                    mainId: undefined,
                  },
                  defaultProps: {
                      children: "children",
                      label: "label"
                  },
                  // 用户导入参数
                  upload: {
                      // 是否显示弹出层（用户导入）
                      open: false,
                      // 弹出层标题（用户导入）
                      title: "",
                      // 是否禁用上传
                      isUploading: false,
                      // 是否更新已经存在的用户数据
                      updateSupport: 0,
                      // 设置上传的请求头部
                      headers: {Authorization: "Bearer " + getToken()},
                      // 上传的地址
                      url: process.env.VUE_APP_BASE_API + "/system/user/importData"
                  },
                  // 查询参数
                  queryParams: {
                      pageNum: 1,
                      pageSize: 20,
                      userName: undefined,
                      phonenumber: undefined,
                      status: undefined,
                      mainId: undefined,
                      deptId: undefined,
                      code: undefined,
                      name: undefined,
                      model: undefined,
                      brand: undefined
                  },
                  // 列信息
                columns: [
                      {key: 0, label: `存货编码`, visible: true},
                      {key: 1, label: `产品名称`, visible: true},
                      {key: 2, label: `产品型号`, visible: true},
                      {key: 3, label: `产品型号明细`, visible: true},
                      {key: 4, label: `计量单位`, visible: true},
                      {key: 5, label: `存货数量`, visible: true},
                      {key: 6, label: `可用数量`, visible: true},
                      {key: 7, label: `创建时间`, visible: true}
                  ],
                  // 表单校验
                  rules: {
                      code: [
                          {required: true, message: "产品编码不能为空", trigger: "blur"},
                          {min: 2, max: 50, message: '用户名称长度必须介于 2 和 50 之间', trigger: 'blur'}
                      ],
                      name: [
                          {required: true, message: "产品名称不能为空", trigger: "blur"}
                      ],
                      deptId: [
                        {required: true, message: "产品分类不能为空", trigger: "blur"}
                      ],
                      model: [
                        {required: true, message: "产品型号不能为空", trigger: "blur"}
                      ],
                  }
              };
          },
          watch: {
              // 根据名称筛选部门树
              deptName(val) {
                  this.$refs.tree.filter(val);
              }
          },
          created() {
              this.getList();
              this.getTreeselect();
          },
          methods: {
              handleShow(row){
                this.$refs.GoodsSaleListFormList.showSaleRecordForOrder(row);
              },
              /** 查询用户列表 */
              getList() {
                  this.loading = true;
                  listGoodsOrderIn(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                          this.userList = response.rows;
                    //this.userList = response.data;
                          this.total = response.total;
                          this.loading = false;
                      }
                  );
              },
              /** 查询部门下拉树结构 */
              getTreeselect() {
                  //listAreaByLazyTree({parentId:3503}).then(response => {
                listByLazyTree().then(response => {
                    this.deptOptions = response.data;
                });
              },
              // 筛选节点
              filterNode(value, data) {
                  if (!value) return true;
                  return data.label.indexOf(value) !== -1;
              },
              // 节点单击事件
              handleNodeClick(data) {
                  //this.queryParams.deptId = data.id;
                  //this.queryParams.deptName = data.label;
                  this.queryParams.mainId = data.id;
                  this.deptIdIn = data.id;
                  this.deptNameIn = data.label;
                  this.mainIdIn = data.id;
                  this.handleQuery();
              },
              // 用户状态修改
              handleStatusChange(row) {
                  let text = row.status === "0" ? "启用" : "停用";
                  this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function () {
                      return changeUserStatus(row.userId, row.status);
                  }).then(() => {
                      this.$modal.msgSuccess(text + "成功");
                  }).catch(function () {
                      row.status = row.status === "0" ? "1" : "0";
                  });
              },
              // 取消按钮
              cancel() {
                  this.open = false;
                  this.reset();
              },
              // 表单重置
              reset() {
                  this.form = {
                      userId: undefined,
                      deptName:undefined,
                      deptId: undefined,
                      userName: undefined,
                      nickName: undefined,
                      password: undefined,
                      phonenumber: undefined,
                      email: undefined,
                      sex: undefined,
                      orderNum:1,
                      status: "0",
                      remark: undefined,
                      postIds: [],
                      roleIds: []
                  };
                  this.resetForm("form");
              },
              /** 搜索按钮操作 */
              handleQuery() {
                  this.queryParams.pageNum = 1;
                  this.getList();
              },
              /** 重置按钮操作 */
              resetQuery() {
                  this.dateRange = [];
                  this.resetForm("queryForm");
                  this.handleQuery();
              },
              // 多选框选中数据
              // handleSelectionChange(selection) {
              //     this.ids = selection.map(item => item.userId);
              //     this.single = selection.length != 1;
              //     this.multiple = !selection.length;
              // },
              // 更多操作触发
              handleCommand(command, row) {
                  switch (command) {
                      case "handleResetPwd":
                          this.handleResetPwd(row);
                          break;
                      case "handleAuthRole":
                          this.handleAuthRole(row);
                          break;
                      default:
                          break;
                  }
              },
              /** 新增按钮操作 */
              handleAdd() {
                this.reset();
                this.form.deptId = this.deptIdIn;
                this.form.mainId = this.mainIdIn;
                this.open = true;
                this.form.orderNum = 1
                this.title = "添加产品";
                /*this.reset();
                this.getTreeselect();
                getUser().then(response => {
                    //this.form.password = this.initPassword;

                });*/
              },
              /** 修改按钮操作 */
              handleUpdate(row) {
                this.reset();
                this.form = row;
                this.open = true;
                this.title = "修改产品";
                 /* this.reset();
                  this.getTreeselect();
                  const userId = row.userId || this.ids;
                  getUser(userId).then(response => {
                      this.form = response.data;
                      this.open = true;
                      this.title = "修改用户";
                  });*/
              },
              /** 重置密码按钮操作 */
              handleResetPwd(row) {
                  this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      closeOnClickModal: false,
                      inputPattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,20}$/,
                      inputErrorMessage: "用户密码不能为空,密码由8-20位数字、大小写字母和特殊符号组成!",
                  }).then(({value}) => {
                      resetUserPwd(row.userId, value).then(response => {
                          this.$modal.msgSuccess("修改成功，新密码是：" + value);
                      });
                  }).catch(() => {
                  });
              },
              /** 分配角色操作 */
              handleAuthRole: function (row) {
                  const userId = row.userId;
                  this.$router.push("/system/user-auth/role/" + userId);
              },
              /** 提交按钮 */
              submitForm: function () {
                  this.$refs["form"].validate(valid => {
                      if (valid) {
                          if (this.form.id != undefined) {
                            updateArea(this.form).then(response => {
                                  this.$modal.msgSuccess("修改成功");
                                  this.open = false;
                                  this.getList();
                              });
                          } else {
                            addArea(this.form).then(response => {
                                  this.$modal.msgSuccess("新增成功");
                                  this.open = false;
                                  this.getList();
                              });
                          }
                      }
                  });
              },
              /** 删除按钮操作 */
              handleDelete(row) {
                  const id = row.id || this.ids;
                  this.$modal.confirm('是否确认存货编码为"' + row.code + '"的数据项？').then(function () {
                      return delGoodsOrderIn(id);
                  }).then(() => {
                      this.getList();
                      this.$modal.msgSuccess("删除成功");
                  }).catch(() => {
                  });
              },
              /** 导出按钮操作 */
              handleExport() {
                  this.download('system/user/export', {
                      ...this.queryParams
                  }, `user_${new Date().getTime()}.xlsx`)
              },
              /** 导入按钮操作 */
              handleImport() {
                  this.upload.title = "用户导入";
                  this.upload.open = true;
              },
              /** 下载模板操作 */
              importTemplate() {
                  this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
              },
              // 文件上传中处理
              handleFileUploadProgress(event, file, fileList) {
                  this.upload.isUploading = true;
              },
              // 文件上传成功处理
              handleFileSuccess(response, file, fileList) {
                  this.upload.open = false;
                  this.upload.isUploading = false;
                  this.$refs.upload.clearFiles();
                  this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
                  this.getList();
              },
              // 提交上传文件
              submitFileForm() {
                  this.$refs.upload.submit();
              }
          }
      };
  </script>

  <style lang="scss">
    .uploadDialog {
      .el-dialog {
        height: 40%;

        .el-dialog__body {
          .el-upload {
            width: 100%;
          }
        }
      }
    }
  </style>
